<template>
  <div class="edit">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>优惠券管理</span>
        <el-button @click="$router.go(-1)" style="float: right; padding: 3px 0" type="text">返回</el-button>
      </div>
      <el-form ref="addform" :model="addform" label-width="120px" size="small" style="width: 60%">
        <el-form-item label="类型" prop="couponType" :rules="{required: true, message: '请选择优惠券类型'}">
          <el-radio-group v-model="addform.couponType">
            <el-radio :label="1">折扣券</el-radio>
            <el-radio :label="2">满减券</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item v-if="addform.couponType == 1" label="折扣比例" prop="discount"
                      :rules="{required: true, message: '请输入折扣比例'}">
          <el-input v-model="addform.discount" type="number" placeholder="折扣比例">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item v-if="addform.couponType == 2" label="满减规则">
          <el-row>
            <el-col :span="12">
              <el-input v-model="addform.couponCondition" type="number" placeholder="满额">
                <template slot="prepend">满</template>
              </el-input>
            </el-col>
            <el-col :span="12">
              <el-input v-model="addform.discount" type="number" placeholder="优惠金额">
                <template slot="prepend">减</template>
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="独立优惠券" prop="aloneType" :rules="{required: true, message: '请选择是否独立优惠券'}">
          <el-radio-group v-model="addform.aloneType">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="优惠券有效期" prop="validNum" :rules="{required: true, message: '请输入有效期'}">
          <el-input v-model="addform.validNum" type="number" placeholder="有效期">
            <template slot="append">
              <el-select v-model="addform.validType" placeholder="请选择" style="width: 70px">
                <el-option
                  key="day"
                  label="天"
                  value="day">
                </el-option>
                <el-option
                  key="month"
                  label="月"
                  value="month">
                </el-option>
                <el-option
                  key="year"
                  label="年"
                  value="year">
                </el-option>
              </el-select>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="使用条件说明" prop="conditionDesc" :rules="{required: true, message: '请输入使用条件说明'}">
          <el-input v-model="addform.conditionDesc" placeholder="使用条件说明"></el-input>
        </el-form-item>
        <el-form-item label="兑换起止日期" prop="value1" :rules="{required: true, message: '请选择时间范围'}">
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="addform.value1"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="优惠券兑换码 ">
          <el-input v-model="addform.couponNo" placeholder="优惠券兑换码"></el-input>
        </el-form-item>
        <el-form-item label="可用商品">
          <el-button @click="$refs.goodsPicker.show()">{{
            goodsInfo.length ? "重新选择" : "选择"
          }}</el-button>
        </el-form-item>
        <!-- 商品信息 -->
        <div v-if="goodsInfo.length" class="goods_wrapper_extend">
          <el-table
            :data="goodsInfo"
            stripe
            size="mini"
            border
            style="width: 100%"
          >
            <el-table-column prop="goodsNumber" label="产品编号">
            </el-table-column>
            <el-table-column prop="desc" label="规格"> </el-table-column>
            <el-table-column label="产品封面图" align="center" width="100">
              <template #default="{ row }">
                <el-image
                  class="image"
                  fit="cover"
                  style="width: 40px; height: 40px"
                  :src="row.goodsCover[0]"
                  :preview-src-list="row.goodsCover"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="goodsName" label="产品名称">
            </el-table-column>
            <el-table-column prop="price" label="产品价格"> </el-table-column>
          </el-table>
        </div>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="addform.couponDesc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="addVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveCode">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <goodsPicker ref="goodsPicker" @selected="res => goodsInfo = res" multiple></goodsPicker>
  </div>
</template>

<script>
  import goodsPicker from "@/components/goodsPicker";
  import {couponAdd, couponGet} from "@/api/system/coupon";
  import {formatDate} from "@/utils";
  import {getQueryObject} from "@/utils";

  export default {
    components: {
      goodsPicker
    },

    data() {
      return {
        addform: {
          validType: 'day'
        },
        goodsInfo: []
      }
    },

    mounted() {
      let {id} = getQueryObject()
      if (id) {
        this.getInfo(id)
      }
    },

    methods: {
      // 保存优惠券
      saveCode() {
        this.$refs['addform'].validate(res => {
          if (res) {
            this.addform.goodsId = this.goodsInfo.goodsId
            if (this.addform.value1.length != 2) {
              return this.$message.error("请完善兑换起止日期")
            } else {
              this.addform.startTime = this.addform.value1[0]
              this.addform.endTime = this.addform.value1[1]
            }
            this.addform.goodsList = this.goodsInfo.map(item => {
              let { length, type, price, desc, goodsId } = item;
              let goodsStandard = {
                fixedPrice: null,
                scale: null,
                discountsPrice: null,
                returnMoney: null,
                groupPrice: null,
                length,
                type,
                price,
                desc
              }
              return {
                goodsId, 
                goodsStandard: JSON.stringify(goodsStandard)
              }
            })
            this.addform.couponTime = this.getCouponTime()
            couponAdd(this.addform).then(res => {
              this.$message.success('操作成功！')
              this.$router.go(-1)
            })
          } else {
            return false
          }
        })
      },

      // 计算优惠券时间
      getCouponTime() {
        let {validType, validNum} = this.addform
        let nowStamp = new Date().getTime()
        let endStamp = 0
        switch (validType) {
          case "day":
            endStamp = nowStamp + validNum * 1000 * 60 * 60 * 24
            break;
          case "month":
            endStamp = nowStamp + validNum * 1000 * 60 * 60 * 24 * 30
            break;
          case "year":
            endStamp = nowStamp + validNum * 1000 * 60 * 60 * 24 * 365
            break
        }
        return formatDate(endStamp)
      },

      // 编辑时候获取优惠券信息回显
      getInfo(id) {
        couponGet(id).then(res => {
          this.addform = res.data
          this.addform.value1 = [res.data.startTime, res.data.endTime]
        })
      },
    }
  }
</script>

<style scoped>

</style>
